import styled from "styled-components";

export const Container = styled.div`
  padding-top: 75px;
`;

export const Box = styled.div`
  position: relative;
  width: 60vw;
  padding: 10px;
  background: #fff;
  margin: auto;
  border-radius: 3px;
  min-height: 80vh;
`;

export const TopicSelection = styled.div`
  position: fixed;
  background-color: #fff;
  border-radius: 3px;
  top: 80px;
  left: 20px;
  width: 10%;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  grid-gap: 10px;
`;

export const CurrentItem = styled.div`
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto;

  background-color: ${(props: {
    actived: boolean;
    isSumitted: boolean;
    isRight?: boolean;
  }) => {
    const { actived, isSumitted, isRight } = props;
    if (isSumitted) {
      if (isRight === true) return "#87d068";
      else if (isRight === false) return "red";
      else return "#dbdbdb";
    } else {
      return actived ? "#288be1" : "";
    }
  }};
  color: ${(props: {
    actived: boolean;
    isSumitted: boolean;
    isRight?: boolean;
  }) =>
    (!props.isSumitted && props.actived) ||
    (props.isSumitted && props.isRight != null)
      ? "#fff"
      : ""};
  border: 1px solid #e4e4e4;
  box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  cursor: pointer;
`;
